<template>
	<div class="main">
		<!-- 头部 -->
		<div class="header">
			<van-nav-bar
				title="购物车"
				left-text="返回"
				left-arrow
				@click-left="onClickLeft"
			/>
		</div>
		<!-- 头部结束 -->
		<van-empty description="购物车暂无内容" v-if="cartList == ''" />
		<!-- 购物车列表 -->
		<div v-else class="cartList">
			<van-swipe-cell
				v-for="item in cartList"
				:key="item.proid"
				class="cartListItem"
			>
				<van-checkbox
					v-model="item.flag"
					class="checkbox"
					@click="phongStore.updateItemFlag(item.cartid, item.flag)"
				></van-checkbox>
				<van-card
					:price="(item.originprice * item.discount * 0.1).toFixed(1)"
					:desc="item.proname"
					:title="item.proname"
					class="goods-card"
					:thumb="item.img1"
				>
					<template #footer>
						<van-stepper
							v-model="item.num"
							theme="round"
							button-size="22"
							disable-input
							class="stepper"
							:disable-minus="item.num <= 1"
							@change="(num) => handleNumChange(item.cartid, num)"
						/>
					</template>
				</van-card>
				<template #right>
					<van-button
						square
						text="删除"
						type="danger"
						class="delete-button"
						@click="removeCommodity(item.cartid)"
					/>
				</template>
			</van-swipe-cell>
		</div>
		<!-- 购物车列表结束 -->
		<!-- 分割线 -->
		<div>
			<van-divider
				:style="{
					color: 'orange',
					borderColor: 'orange',
					padding: '0 16px',
				}"
			>
				猜你喜欢
			</van-divider>
		</div>
		<!-- 分割线结束 -->
		<!-- 推荐产品 -->
		<div class="commodityList">
			<van-list
				v-model:loading="loading"
				finished-text="没有更多了"
				@load="onLoad"
				class="car-list"
			>
				<div class="commodity-item">
					<div
						v-for="item in commodityData"
						:key="item"
						@click="gotoDetails(item)"
						class="commodity-item-div"
					>
						<div><img :src="item.img1" alt="" /></div>
						<div class="commodity-text">
							<p class="commodityName">
								{{ item.proname }}
							</p>
						</div>
						<div class="commodity-money">
							￥{{ item.originprice }}
						</div>
					</div>
				</div>
			</van-list>
			<van-cell />
			<van-back-top right="5vw" bottom="10vh" />
		</div>
		<!-- 推荐产品结束 -->
		<!-- 底部 -->
		<div class="carFooter">
			<van-submit-bar
				:price="amount * 100"
				button-text="提交订单"
				@submit="onSubmit"
				:disabled="selectedCartList.length === 0"
			>
				<van-checkbox v-model="checked">全选</van-checkbox>
				<!-- <template #tip>
				你的收货地址不支持配送,
				<span @click="onClickLink">修改地址</span>
			</template> -->
			</van-submit-bar>
		</div>
		<!-- 底部结束 -->
	</div>
</template>

<script setup>
import { ref, computed } from "vue"
import { showToast, showConfirmDialog } from "vant"
import { storeToRefs } from "pinia"
import { useRouter } from "vue-router"

import { getCartList, getHotProducts } from "../services/index"
import { usePhongStore } from "../stores/phone-store"

const phongStore = usePhongStore()
const { cartList,selectedCartList } = storeToRefs(phongStore)

// 返回上一级
const onClickLeft = () => history.back()

// 推荐商品列表
const commodityData = ref([])
// 初始化推荐产品显示第一页
const count = ref(1)
// 下拉刷新
const loading = ref(false)
// const finished = ref(false)
const onLoad = async () => {
	loading.value = true
	// 获取推荐产品列表的数据
	const result = await getHotProducts(count.value++, 10)
	commodityData.value.push(...result.data.data)
	loading.value = false
}

// 商品列表点击事件（前往商品详情页）
const router = useRouter()
const gotoDetails = (id) => {
	router.push(`/detail/${id.proid}`)
}

// 全选 与 全不选
// const checked = computed({
// 	get() {
// 		return cartList.value.every((item) => item.flag === true)
// 	},
// 	set(val) {
// 		if (val === true) {
// 			cartList.value.forEach((item) => (item.flag = true))
// 		} else {
// 			cartList.value.forEach((item) => (item.flag = false))
// 		}
// 	},
// })

const checked = computed({
	get: () => selectedCartList.value.length === cartList.value.length,
	set: (val) => {
		if (val) {
			phongStore.selectAll()
		} else {
			phongStore.deSelectAll()
		}
	},
})

// 封装函数 获取购物车列表
const getCart = async () => {
	const result = await getCartList()

	// cartList.value = result.data.data
}
getCart()

// 再次获取购物车列表
phongStore.fetchCarList()

// 更新购物车
const handleNumChange = (cartid, num) => {
	phongStore.updateItemNum(cartid, num)
}

// 购物车删除
const removeCommodity = async (cartid) => {
	await showConfirmDialog({
		title: "确认操作",
		message: "确定要删除这个商品吗？",
	})
	phongStore.removeCartItem(cartid)

	getCart()
	console.log(cartList.value)
}

// 计算总价
const amount = computed(() => {
	return selectedCartList.value.reduce((sum, item) => {
		sum += item.originprice * (item.discount * 0.1) * item.num
		return sum
	}, 0)
})

const onSubmit = () => showToast("点击按钮")
// const onClickLink = () => showToast("修改地址")
</script>

<style scoped>
.goods-card {
	margin: 0;
	background-color: #fff;
	padding-left: 50px;
}
.delete-button {
	height: 100%;
}
.cartList {
	position: relative;
	/* background-color: #eee */
}
.stepper {
	position: absolute;
	right: 10px;
	bottom: 10px;
}
.commodityList {
	padding-top: 15px;
	padding-bottom: 50px;
	background-color: #fff;
}
.commodity-item {
	text-align: left;
	display: flex;
	font-size: 15px;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	/* overflow: hidden; */
	/* background-color: #fff; */
}
.commodity-item div {
	width: 150px;
}
.commodity-item img {
	border-radius: 10px;
	width: 150px;
	height: 150px;
}
.commodity-money {
	color: red;
	padding: 10px 0;
}
.commodityName {
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 20px;
}
.cartListItem {
	margin-bottom: 10px;
}
.checkbox {
	position: absolute;
	left: 15px;
	bottom: 40px;
	z-index: 100;
}
.commodity-item-div{
	border-bottom: 1px solid #eee;
	/* background-color: #eee; */
	width: 100px;
	height: 230px;
	margin-bottom: 10px;
}
</style>
